Skip to content

style: centered keyword items in the packages card#854

Merged
danielroe merged 2 commits intonpmx-dev:mainfrom
afterfiveguy:style/center-card-keywords
Feb 3, 2026
Merged

style: centered keyword items in the packages card#854
danielroe merged 2 commits intonpmx-dev:mainfrom
afterfiveguy:style/center-card-keywords

Conversation

@afterfiveguy
Copy link
Contributor

@afterfiveguy afterfiveguy commented Feb 3, 2026

This is a simple PR to fix a slight styling issue on the package card when searching
Current style
image
Fixed style:
image

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 3, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

This pull request updates the Package Card component template to add the CSS class items-center to the keywords container div that is rendered when keywords exist. The change affects only styling (vertical alignment of keyword tags) and does not modify component logic, data flow, exported/public declarations, or event handling.

🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description directly addresses the changeset by explaining a styling issue with package card keyword alignment and providing before/after visual comparisons.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Feb 3, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@vercel
Copy link

vercel bot commented Feb 3, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs.npmx.dev Error Error Feb 3, 2026 10:14pm
npmx.dev Ready Ready Preview, Comment Feb 3, 2026 10:14pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
npmx-lunaria Ignored Ignored Feb 3, 2026 10:14pm

Request Review

@vercel
Copy link

vercel bot commented Feb 3, 2026

Deployment failed with the following error:

Failed to create deployment for team_ALCY5q4yeU97jar3pmPUQ7I3 in project prj_MJNmtAsoWitL8bQBYh39a9SHANTl: FetchError: request to https://76.76.21.112/v13/now/deployments?ownerId=team_ALCY5q4yeU97jar3pmPUQ7I3&projectId=prj_MJNmtAsoWitL8bQBYh39a9SHANTl&skipAutoDetectionConfirmation=1&teamId=team_ALCY5q4yeU97jar3pmPUQ7I3&traceCarrier=%7B%22ot-baggage-webhookAt%22%3A%221770132297087%22%2C%22ot-baggage-senderUsername%22%3A%22gh.MhemedAbderrahmen%22%2C%22x-datadog-trace-id%22%3A%226328608923945116327%22%2C%22x-datadog-parent-id%22%3A%225671137727438623054%22%2C%22x-datadog-sampling-priority%22%3A%222%22%2C%22x-datadog-tags%22%3A%22_dd.p.tid%3D6982134900000000%2C_dd.p.dm%3D-3%22%2C%22traceparent%22%3A%2200-698213490000000057d3bc49321da2a7-4eb3edb7544b914e-01%22%2C%22tracestate%22%3A%22dd%3Dt.tid%3A6982134900000000%3Bt.dm%3A-3%3Bs%3A2%3Bp%3A4eb3edb7544b914e%22%7D failed, reason: socket hang up

@vercel
Copy link

vercel bot commented Feb 3, 2026

Deployment failed with the following error:

Failed to create deployment for team_ALCY5q4yeU97jar3pmPUQ7I3 in project prj_0L4Fs1yierGXfNgP2jR79rMitJi6: FetchError: request to https://76.76.21.112/v13/now/deployments?ownerId=team_ALCY5q4yeU97jar3pmPUQ7I3&projectId=prj_0L4Fs1yierGXfNgP2jR79rMitJi6&skipAutoDetectionConfirmation=1&teamId=team_ALCY5q4yeU97jar3pmPUQ7I3&traceCarrier=%7B%22ot-baggage-webhookAt%22%3A%221770132297087%22%2C%22ot-baggage-senderUsername%22%3A%22gh.MhemedAbderrahmen%22%2C%22x-datadog-trace-id%22%3A%226328608923945116327%22%2C%22x-datadog-parent-id%22%3A%222608777557011555986%22%2C%22x-datadog-sampling-priority%22%3A%222%22%2C%22x-datadog-tags%22%3A%22_dd.p.tid%3D6982134900000000%2C_dd.p.dm%3D-3%22%2C%22traceparent%22%3A%2200-698213490000000057d3bc49321da2a7-24343d5dbfaf6692-01%22%2C%22tracestate%22%3A%22dd%3Dt.tid%3A6982134900000000%3Bt.dm%3A-3%3Bs%3A2%3Bp%3A24343d5dbfaf6692%22%7D failed, reason: socket hang up

@vercel
Copy link

vercel bot commented Feb 3, 2026

Deployment failed with the following error:

Failed to create deployment for team_ALCY5q4yeU97jar3pmPUQ7I3 in project prj_RypB9aOA2tZJOgXvauA3RFur02oX: FetchError: request to https://76.76.21.112/v13/now/deployments?ownerId=team_ALCY5q4yeU97jar3pmPUQ7I3&projectId=prj_RypB9aOA2tZJOgXvauA3RFur02oX&skipAutoDetectionConfirmation=1&teamId=team_ALCY5q4yeU97jar3pmPUQ7I3&traceCarrier=%7B%22ot-baggage-webhookAt%22%3A%221770132297087%22%2C%22ot-baggage-senderUsername%22%3A%22gh.MhemedAbderrahmen%22%2C%22x-datadog-trace-id%22%3A%226328608923945116327%22%2C%22x-datadog-parent-id%22%3A%225671137727438623054%22%2C%22x-datadog-sampling-priority%22%3A%222%22%2C%22x-datadog-tags%22%3A%22_dd.p.tid%3D6982134900000000%2C_dd.p.dm%3D-3%22%2C%22traceparent%22%3A%2200-698213490000000057d3bc49321da2a7-4eb3edb7544b914e-01%22%2C%22tracestate%22%3A%22dd%3Dt.tid%3A6982134900000000%3Bt.dm%3A-3%3Bs%3A2%3Bp%3A4eb3edb7544b914e%22%7D failed, reason: socket hang up

julien-deramond
julien-deramond approved these changes Feb 3, 2026
View reviewed changes
Copy link
Contributor

@julien-deramond julien-deramond left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this fix @MhemedAbderrahmen! I took a look on macOS with Firefox, Chrome, and Safari, and it looks good: the vertical centering is consistent regardless of the number of items or lines of content.

However, the PR's title should be updated to follow the Conventional Commits. It's used as the commit message when the PR is merged.
More info at https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#commit-messages-and-pr-titles.
It could be something like `fix: vertically centered package card keywords" instead.

(I'm not part of the core team, but offered to help with pre-reviews on Discord)

@danielroe danielroe enabled auto-merge February 3, 2026 22:13
@danielroe danielroe added this pull request to the merge queue Feb 3, 2026
Merged via the queue into npmx-dev:main with commit 23d2ab3 Feb 3, 2026
15 of 16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielroe danielroe danielroe approved these changes

+1 more reviewer

@julien-deramond julien-deramond julien-deramond approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@afterfiveguy @julien-deramond @danielroe @AbderrahmenMHEMED